<%@ page import="java.util.List" %>
<%@ page import="com.google.gson.Gson" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>任务线</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <script src="js/jquery-3.5.1.js"></script>
    <script src="js/bootstrap.js"></script>
    <link rel="icon" href="images/12.ico">
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body {
            background-color: #eecdee;
        }

        #outer {
            width: 100%;
            margin: 0px auto;
            text-align: center;
        }

        .task-container {
            margin-top: 20px;
        }

        #task_title {
            text-align: center;
            font-family: 华文行楷;
            font-size: 44px;
            color: #255bc4;
            padding-bottom: 22px;
            background-color: #eecdee;
            font-weight: bold;
            margin: 0;
        }

        .task_str {
            text-align: center;
            font-weight: bold;
            color: red;
            margin: 0;
            background-color: #eecdee;
            padding-bottom: 22px;
        }

        #LinkBar {
            position: fixed;
            left: 20px;
            top: 260px;
        }

        #LinkBar button {
            margin: 10px;
            border-radius: 10px;
        }

        .date_month {
            font-family: 黑体;
            font-weight: bold;
            cursor: pointer;
            margin-left: 20px;
        }

        .date_year {
            cursor: pointer;
        }

        #task_list ul {
            margin-left: 40px;
            margin-top: 20px;
            list-style: none;
            display: none;
            font-size: 22px;
            font-family: 楷体;
            font-weight: bold;
        }

        #task_list ul > li {
            border-bottom: 1px solid #ccc;
            vertical-align: middle;
            margin-top: 10px;
        }

        .my_go_index a {
            text-decoration: none;
            color: #7171ef;
        }

        #task_list {
            width: 70%;
            text-align: left;
            background-color: #eef0c1;
            padding: 20px;
            border-radius: 20px;
            position: relative;
        }

        .taskStatus {
            margin-right: 22px;
            position: absolute;
            right: 2px;
            font-family: 黑体;
            font-size: 18px;
            font-weight: bold;
        }

        .taskName {
            width: 800px;
            display: inline-block;
            margin-left: 44px; /* 设置左边距为44像素 */
            /* 限制a标签中的字数为22，多出的部分用...显示 */
            overflow: hidden; /* 隐藏溢出的内容 */
            text-overflow: ellipsis; /* 溢出的文本用省略号显示 */
            white-space: nowrap; /* 文本不换行 */
        }

        .taskNum {
            display: inline-block;
            text-align: left;
            margin-bottom: 10px;
        }

        #search_div {
            width: 60%;
            margin: 0px auto;
            text-align: center;
        }

        .year_div{
            display: none;
        }

        .task_count{
            font-size: 16px;
            font-weight: bolder;
        }


        @media (max-width: 1023px) {
            #LinkBar {
                left: 80%;
                top: 210px;
            }

            #LinkBar .btn {
                margin: 5px;
                width: 80%;
                padding: 5px 20px 5px 10px;
                height: 50%;
                font-size: 14px;
            }

            #task_list {
                margin: 0px 10px 0px 20px;
                width: 90%;
            }

            #show_week {
                display: none
            }

            .task_str {
                font-size: 12px;
            }

            #task_list ul {
                margin-left: 10px;
                font-size: 16px;
            }

            .taskStatus {
                font-size: 14px;
            }

            .taskName {
                margin-left: 5px;
                width: 60%;
            }
        }
        @media (min-width: 1024px) {
            #task_list {
                margin: 0px auto;
            }
        }
    </style>
    <link rel="stylesheet" href="css/mottos.css">
</head>
<body>
<%
    int uid = session.getAttribute("uid")==null?0:Integer.parseInt(session.getAttribute("uid").toString());
    if (uid == 0) {
        response.sendRedirect("login.jsp");
        return;
    }

    List<String> mottos = (List<String>) session.getAttribute("mottos");
    // 将 mottos 转换为 JSON 格式的字符串
    String jsonMottos = new Gson().toJson(mottos);
%>
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="getTask.jsp" target="_parent">首页·计划管理</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a target="_parent" href="TaskLineServlet">任务成就</a></li>
                <li><a target="_parent" href="ProSpectServlet?what=query">布局·规划</a></li>
                <li><a target="_parent" href="URLServlet?what=query">重要网址</a></li>
                <li><a target="_parent" href="NoteServlet?what=query">重要记事</a></li>
                <li><a target="_parent" href="mottos.jsp">感悟·格言</a></li>
                <li><a target="_parent" href="bookNotes.jsp">读书笔记</a></li>

            </ul>
            <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">搜索</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a target="_parent" id="login_out"><% String uname = (String) session.getAttribute("uname");
                    String welcomeMessage = "欢迎,登录";
                    if (uname != null && !uname.isEmpty()) {
                        welcomeMessage = "欢迎," + uname + "[退出登录]";
                    }
                    out.print(welcomeMessage);
                %>
                </a></li>
                <li><a target="_parent" href="regist.jsp">注册</a></li>
                <li><a target="_parent" href="#">会员中心</a></li>
                <li><a target="_parent" href="Contact_us.jsp">联系我们</a></li>
            </ul>
        </div>
    </div>
</nav>
<div id="motto">
    <div class="scroll-container">
        <span id="st1" class="scroll-text"></span>
<%--        <span id="st2" class="scroll-text"></span>--%>
<%--        <span id="st3" class="scroll-text"></span>--%>
<%--        <span id="st4" class="scroll-text"></span>--%>
    </div>
</div>

<div id="outer">
    <%--    <h1 class="my_go_index"><a href="index.jsp"><— 返回任务列表</a></h1>--%>
    <div class=" task-container">
        <h1 id="task_title">任务成就概览</h1>
        <h3 class="task_str">${taskStr}</h3>
        <div id="search_div">
            <div class="input-group">
                <input type="text" id="search_input" class="form-control"
                       placeholder="输入任务名称可以查询具体的任务数据,支持模糊查询">
                <span class="input-group-btn">
                    <button class="btn btn-primary" id="search_btn" type="button">查找任务</button>
               </span>
            </div>
        </div>
        <hr>
        <div id="task_list">
            <!-- 创建一个垂直按钮组，用于操作任务列表的展开和折叠 -->
            <div id="LinkBar" class="btn-group-vertical btn-group-lg" role="group" aria-label="...">
                <!-- 用于展开所有任务列表的按钮 -->
                <button type="button" id="all_expand" class="btn btn-info">全部展开</button>
                <!-- 用于折叠所有任务列表的按钮 -->
                <button type="button" id="all_collapse" class="btn btn-success">全部折起</button>
                <hr>
                <button type="button" id="to_top" class="btn btn-primary">回到顶部</button>
                <button type="button" id="to_bottom" class="btn btn-warning">跳到底部</button>
            </div>
            <c:set var="task_map" value="${taskLineMap}"/>
            <c:set var="task_list" value="${allTaskList}"/>
            <c:set var="kyes" value="${task_map.keySet()}"/>
            <c:forEach var="year" items="${kyes}">
                <h2 class="date_year">${year}年</h2>
                <div class="year_div">
                    <c:set var="months" value="${task_map[year]}"/> <!-- 根据 year 获取对应的值 -->
                    <c:forEach var="month" items="${months}">
                        <h3 class="date_month" id="${year}-${month}">${month}月 </h3>
                        <c:set var="ccount" value="0"/> <!-- 设置已完成任务量计数器 -->
                        <c:set var="uncCount" value="0"/> <!-- 设置未完成任务量计数器 -->
                        <ul>
                            <c:forEach var="task" items="${task_list}">
                                <!-- 将任务日期解析为日期对象 -->
                                <fmt:parseDate value="${task.date}" pattern="yyyy-MM-dd" var="parsedDate"/>
                                <!-- 获取任务年份，注意年份需要加1900 -->
                                <c:set var="taskYear" value="${parsedDate.year + 1900}"/>
                                <!-- 获取任务月份，注意月份需要加1 -->
                                <c:set var="taskMonth" value="${parsedDate.month + 1}"/>
                                <!-- 格式化任务日期的日部分 -->
                                <fmt:formatDate value="${parsedDate}" pattern="dd" var="taskDay"/>
                                <!-- 格式化任务日期的星期几部分 -->
                                <fmt:formatDate value="${parsedDate}" pattern="E" var="taskWeek"/>
                                <c:set var="d" value="${year}-${month}"/>
                                <%--                                <c:if test="${task.date.indexOf(d) > -1}">--%>
                                <c:if test="${year == taskYear && month == taskMonth}">

                                    <c:if test="${task.finished == 'true'}">
                                         <c:set var="ccount" value="${ccount + 1}"/>
                                    </c:if>

                                    <c:if test="${task.finished == 'false'}">
                                        <c:set var="uncCount" value="${uncCount + 1}"/>
                                    </c:if>

                                    <li>
                                        <span style="top: -8px"
                                              class="glyphicon glyphicon-grain taskNum">${index} </span>
                                        <a class="taskName ufTaskName"
                                           href="detileTask.jsp?id=${task.id}&title=${task.title}&finished=${task.finished}"
                                        >${task.title}</a> <!-- 任务链接 -->
                                        <span class="taskStatus">
                                    <span style="color: #255bc4;">${taskDay}号</span> <span
                                                id="show_week"> , ${taskWeek}</span>
                                    ${task.finished=="true"?"<span style='color: red' class='glyphicon glyphicon-ok-sign'></span>"
                                            :"<span style='color: blue' class='glyphicon glyphicon-remove-sign'>"}
                                    </span>
                                    </li>

                                </c:if>
                            </c:forEach>
                        </ul>
                        <script>
                            $("#${year}-${month}").append("<span class='task_count' style='color:#F66B7FFF;'>(已完成:${ccount}</span> "+
                                "<span class='task_count' style='color:#6E9AF0FF;'>/ 未完成:${uncCount})</span>");
                        </script>
                    </c:forEach>

                </div>
            </c:forEach>
        </div>
    </div>
</div>


<footer style="background-color: #eecdee; margin-top: 50px;" class="navbar-fixed-bottom  text-center"
        style="color: yellow; font-size: 14px">
    <!--                <a target="_blank" href="#">友情链接</a>-->
    <a target="_blank" href="https://beian.miit.gov.cn">京ICP备2024085356号</a>
    <!--                <a target="_blank" href="#">联网许可</a>-->
</footer>

</body>
<script>
    $("#task_list h3").click(function () {
        $(this).next("ul").slideToggle(500, function () {
        })
    });
    $(".date_year").click(function () {
        $(this).next(".year_div").slideToggle(300, function () {
        })
    });
    $("#all_expand").click(function () {
        $("li").show();
        $(".year_div").slideDown(500, function () {
        });
        $(".date_month+ul").slideDown(1000, function () {
        });
    });
    $("#all_collapse").click(function () {
        $("li").show();
        $(".date_month+ul").slideUp(1000, function () {
        })
        $(".year_div").slideUp(1200, function () {
        });
    });
    $("#search_btn").click(function () {
        let btn_text = $(this).text();
        let searchText = $("#search_input").val().trim();
        if (searchText === "" && btn_text === "查询全部任务") {
            $("li").show();
            $(".year_div").slideDown(500, function () {
            });
            $(".date_month+ul").slideDown(1000, function () {
            });
            $("#search_btn").text("查找任务");
            return;
        }
        let isHaveResult = false;
        $(".taskName").each(function () {
            let taskName = $(this).text();
            if (taskName.indexOf(searchText) == -1) {
                $(this).parent().hide();
            } else {
                isHaveResult = true;
                $(this).parent().show().parent().show().parent().show();
            }
        });
        if (!isHaveResult) {
            alert("没有找到 ▶ "+searchText+" ◀ 相关任务");
        }
        $(this).text("查询全部任务");
        $("#search_input").val("");
    });

    // 动态滚动文字效果
    // 初始化 mottos 变量为从服务器传输过来的 JSON 字符串
    const mottos = <%= jsonMottos %>;
    const scrollText = $('.scroll-text');
    // 当滚动开始时，显示文本并更新内容
    scrollText.each(function () {
        $(this).on('animationstart', function () {
            // 更新内容在动画开始时
            const newMotto = mottos[Math.floor(Math.random() * mottos.length)];
            $(this).text(newMotto); // 更新文本
            $(this).css('opacity', '1'); // 开始动画时显示文本
            $(this).css('left', '100%'); // 确保文本位置在右边
        });
        // 当滚动到最左边时，重新回到最右边开始滚动
        $(this).on('animationiteration', function () {
            const newMotto = mottos[Math.floor(Math.random() * mottos.length)];
            $(this).text(newMotto); // 更新文本
            $(this).css('opacity', '0'); // 重新定位后隐藏文本
        });
    });

    $("#login_out").click(function () {
        let b = confirm("确定退出当前账号的登录吗?");
        if (b) {
            //删除浏览器中的cookie信息
            document.cookie = "task_uid=;expires=" + new Date(0).toUTCString();
            document.cookie = "task_uname=;expires=" + new Date(0).toUTCString();
            location.href = "login.jsp";
        }
    });
    $("#to_top").click(function () {
        $("html,body").animate({scrollTop: 0}, 500);
    });
    $("#to_bottom").click(function () {
        $("html,body").animate({scrollTop: $(document).height()}, 500);
    });
</script>
</html>
